<template>
  <div>
    <el-table
      :data="historyList"
      style="width: 100%"
    >
      <el-table-column

        :label="$t('name')"
      >
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.name"
            disabled
          />
        </template>
      </el-table-column>
      <el-table-column

        :label="$t('value')"
      >
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.value"
            disabled
          />
        </template>
      </el-table-column>
      <el-table-column :label="$t('time')" sortable width="220">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span style="margin-left: 13px">{{ formatDate(scope.row.createdDate) }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 15px 0;text-align: right">
      <el-pagination
        background
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { pageGetDeviceSettingValueHistory } from '@/api/iot/iotDeviceSettingApi'
import { getPageSize } from '@/util/storage'
import { formatDate } from '@/util/common'

export default {
  name: 'ValueHistory',
  props: {
    setting: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      currentPage: 1,
      total: 0,
      pageSize: getPageSize(),
      historyList: []
    }
  },
  watch: {
    setting: {
      deep: true,
      handler(val) {
        if (this.setting.settingId) {
          this.pageGetDeviceSettingValueHistory()
        }
      }
    }
  },
  created() {
    if (this.setting.settingId) {
      this.pageGetDeviceSettingValueHistory()
    }
  },
  methods: {
    formatDate(time) {
      return formatDate(this, time)
    },
    handleSizeChange(value) {
      this.pageSize = value
      this.pageGetDeviceSettingValueHistory()
    },
    handleCurrentChange(item) {
      this.currentPage = item
      this.pageGetDeviceSettingValueHistory()
    },
    pageGetDeviceSettingValueHistory() {
      pageGetDeviceSettingValueHistory({
        settingId: this.setting.settingId,
        pageSize: this.pageSize,
        currentPage: this.currentPage
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          const historyList = data.data
          historyList.forEach(history => {
            if (this.setting.paramList) {
              for (let i = 0, j = this.setting.paramList.length; i < j; i++) {
                const param = this.setting.paramList[i]
                if (param.value === history.value) {
                  history.name = param.name
                  break
                }
              }
            } else {
              history.name = history.value
            }
          })
          this.historyList = historyList
          this.total = data.total
        } else {
          this.historyList = []
          this.total = 0
        }
      })
    }
  }
}
</script>

